<template>
  <div class="projectListItem">
    <div class="image-container">
      <img
        :src="projectItem.coverImg"
        alt="背景图片"
        class="background-image"
      />
      <div class="overlay" v-if="projectItem.registrationStatus != 1">
        <img
          :src="getOverlayImg(projectItem.registrationStatus)"
          alt="蒙版图片"
          class="overlay-image"
        />
        <p class="overlay-text">
          {{ getStatusText(projectItem.registrationStatus) }}
        </p>
      </div>
      <img
        :src="projectItem.collectFlag ? collectedImg : notCollectedImg"
        alt="收藏图标"
        class="favorite-icon"
        @click="toggleFavorite"
      />
    </div>
    <div class="message-container">
      <div class="message-container-title">
        <a-tooltip color="rgba(87,87,87,0.8)">
          <template #title>{{ projectItem.name }}</template>
          <div class="titleName">{{ projectItem.name }}</div>
        </a-tooltip>
        <div class="difficulty">
          <StarFilled style="color: #f7db4d; margin-right: 5px" />{{
            t("projectCard", "难度")
          }}
          {{ projectItem?.difficulty?.toFixed(1) }}
        </div>
        <!-- <div class='posts'>{{projectItem.posts}}</div> -->
      </div>
      <slot name="job"></slot>
      <!-- <div class='starBox'>
				<span>难度：</span><a-rate :value="projectItem.difficulty" disabled style='margin-bottom:3px' />
			</div> -->
      <div class="type_and_grade">
        <div class="posts"><slot name="titleRight"></slot></div>
        <!-- <div class='typeBox'>{{projectItem.category}}</div> -->
        <div
          class="grade"
          style="color: deeppink; font-weight: bold"
          v-if="projectItem.auditStatus && props.type == 'apply'"
        >
          {{ getAuditStatusText(projectItem.auditStatus) }}
        </div>
        <!-- <div class='grade' v-if="projectItem.grade&&props.type!='apply'">{{projectItem.grade}}级</div> -->

        <div class="tag">
          <div class="typeBox">{{ projectItem.categoryName }}</div>
          <div class="grade" v-if="projectItem.grade && props.type != 'apply'">
            {{ projectItem.grade }} {{ t("projectCard", "级") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import projectImg from "@/assets/projectImg4.jpg";
import projectImgOver from "@/assets/已结束.png";
import projectImgStart from "@/assets/未开始.png";
import collectedImg from "@/assets/收藏3.png";
import notCollectedImg from "@/assets/收藏4.png";
import { message } from "ant-design-vue";
import { StarFilled } from "@ant-design/icons-vue";

import { defineProps, defineEmits, ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { collectProject, uncollectProject } from "@/request/projectSquare.js";
import { t } from "@/i18n";

onMounted(() => {
  // console.log(props)
});

const getAuditStatusText = (status) => {
  if (status == 0) return t("control", "待审核");
  else if (status > 0) return t("control", "已通过");
  else if (status < 0) return t("control", "已拒绝");
};

let route = useRoute();
let projectImgStart1 = ref(projectImgStart);
let projectImgOver1 = ref(projectImgOver);

const props = defineProps({
  projectItem: Object,
  getCollectedList: Function,
  type: String,
});

let projectItem = reactive(props.projectItem);

const getStatusText = (status) => {
  let statusText = {
    0: t("projectCard", "报名时间未开始"),
    1: t("control", "招募中"),
    2: t("projectCard", "报名时间已截止"),
  };
  return statusText[status] || "";
};
const getOverlayImg = (status) => {
  let overlayImg = {
    0: projectImgStart1.value,
    1: "",
    2: projectImgOver1.value,
  };
  return overlayImg[status] || "";
};

const toggleFavorite = async (e) => {
  e.stopPropagation();
  let text = projectItem.collectFlag
    ? t("projectCard", "已取消收藏")
    : t("projectCard", "收藏成功");
  let errorText = projectItem.collectFlag
    ? t("projectCard", "取消收藏失败")
    : t("projectCard", "收藏失败");
  let res;
  if (projectItem.collectFlag == 0) {
    res = await collectProject(projectItem.id);
  }
  if (projectItem.collectFlag == 1) {
    res = await uncollectProject(projectItem.id);
    if (route.path == "/personalCenter") {
      if (props.getCollectedList) {
        await props.getCollectedList();
      }
    }
    console.log(props);
  }
  if (res && res.code == 200) {
    projectItem.collectFlag = !projectItem.collectFlag; // 切换收藏状态
    message.success(text);
  } else {
    message.error(errorText);
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";
$imageContainerHeight: 100px;
$cardTittlePaddingRight: 6px;

.projectListItem {
  cursor: pointer;
  width: 270px;
  /* height: 266px; */
  align-self: flex-start;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px #e3e2ff;
  border-radius: 6px;
  /* width: 200px;
		margin: 10px;
		border-radius: 5px;
		box-shadow: $generalBoxShadow;
		justify-self: center; */
  /* flex:1; */
  /* color:#f4ea2a */

  .image-container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 5px 5px 0 0;

    .background-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;

      .overlay-image {
        width: 32px;
        margin-bottom: 5px;
        margin-top: 3px;
      }

      .overlay-text {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.8);
        white-space: nowrap;
        text-align: center;
        margin: 0;
      }
    }

    .favorite-icon {
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }

  .message-container {
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    .message-container-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      $postsWidth: 76px;

      .titleName {
        width: calc(100% - #{$postsWidth});
        display: inline-block;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .starBox {
      display: flex;
      align-items: center;
    }
    .type_and_grade {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      /* .typeBox{
					$typeBoxHeight:27px;
					@include FlexCenterAndCenter();
					height: $typeBoxHeight;
					border: 1px solid blue;
					color:blue;
					border-radius: $typeBoxHeight;
					padding:5px 10px;
				}
				
				.grade{
					font-size: 15px;
					padding-right: $cardTittlePaddingRight;
				} */
    }
  }
  .difficulty {
    font-size: 14px;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    margin-left: 6px;
    color: #b5acce;
  }
  .tag {
	// width:calc(100% - 60px);
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    color: #8466f5;
    .typeBox {
      padding: 6px 9px;
      background: #eeeeff;
      border-radius: 13px 0px 0px 13px;
      border: 1px solid #d7d5ff;
      border-right: none;
    }
    .grade {
      padding: 6px 9px;
      background: #eeeeff;
      border-radius: 0px 13px 13px 0px;
      border: 1px solid #d7d5ff;
    }
  }
  .posts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: bold;
    color: deeppink;
    border-radius: 5px;
    white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    font-size: 14px;
	margin-right: 10px;
  }
}
</style>
